/** 
  实习评价模板详情
*/
<template>
  <div>
    <table class="table-style-baseinfos">
      <tbody>
        <tr>
          <td class="text-right-background-color">{{ $t('internEvaluateTempSet.evaluateTempName') }}:</td>
          <td class="text-left-background-none">{{ dataListProp.templateName }}</td>
          <td class="text-right-background-color">{{ $t('graduateBase.trainingLevel') }}:</td>
          <td class="text-left-background-none">{{ dataListProp.trainingLevelStr }}</td>
        </tr>
        <tr>
          <td class="text-right-background-color">{{ $t('graduateBase.cultivationCategory') }}:</td>
          <td class="text-left-background-none">{{ dataListProp.trainingTypeStr }}</td>
          <td class="text-right-background-color">{{ $t('graduateBase.degreeType') }}:</td>
          <td class="text-left-background-none">{{ dataListProp.degreeTypeStr }}</td>
        </tr>
        <tr>
          <td class="text-right-background-color">{{ $t('graduateBase.waysOfLearning') }}:</td>
          <td class="text-left-background-none">{{ dataListProp.learnFormStr }}</td>
          <td class="text-right-background-color">{{ $t('graduateBase.college') }}:</td>
          <td class="text-left-background-none">{{ dataListProp.collegeAcademyStr }}</td>
        </tr>
        <tr>
          <td class="text-right-background-color">{{ $t('graduateBase.profession') }}:</td>
          <td class="text-left-background-none">{{ dataListProp.majorStr }}</td>
          <td class="text-right-background-color">{{ $t('templateSetting.isEnabled') }}:</td>
          <td class="text-left-background-none">{{ dataListProp.isEnabledStr }}</td>
        </tr>
        <tr>
          <td class="text-right-background-color">{{ $t('templateSetting.description') }}:</td>
          <td class="text-left-background-none" colspan="3">{{ dataListProp.description }}</td>
        </tr>
      </tbody>
    </table>
    <table class="table-style-baseinfo" v-if="indexMode === 'index'">
      <thead>
        <tr>
          <th class="text-center-background-color">{{ $t('internEvaluateTempSet.evaluateIndex') }}</th>
          <th class="text-center-background-color">{{ $t('internEvaluateTempSet.evaluateIndexDes') }}</th>
          <th class="text-center-background-color">{{ $t('internEvaluateTempSet.evaluateIndexWeig') }}</th>
          <th class="text-center-background-color">{{ $t('internEvaluateTempSet.evaluateDetails') }}</th>
          <th class="text-center-background-color">{{ $t('internEvaluateTempSet.evaluateDetailsDes') }}</th>
          <th class="text-center-background-color">{{ $t('internEvaluateTempSet.evaluateDetailsWeig') }}</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(item, index) in tableData" :key="index">
          <td v-if="item.subCount" :rowspan="item.subCount" class="text-center-background">{{ item.itemName }}</td>
          <td v-if="item.subCount" :rowspan="item.subCount" class="text-center-background">{{ item.itemDescription }}</td>
          <td v-if="item.subCount" :rowspan="item.subCount" class="text-center-background">{{ item.itemWeight }}</td>
          <td class="text-center-background">{{ item.detailName }}</td>
          <td class="text-center-background">{{ item.detailDescription }}</td>
          <td class="text-center-background">{{ item.detailWeight }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>
<script>
export default {
  props: {
    dataListProp: {
      type: Object,
      default: () => {}
    },
    showFlag: {
      type: Boolean,
      default: false
    },
    indexMode: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      tableData: []
    }
  },
  filters: {
  },
  mounted() {
  },
  methods: {
  },
  watch: {
    dataListProp: {
      handler(newVal) {
        if (this.indexMode === 'index') {
          if (newVal.itemList && Array.isArray(newVal.itemList) && newVal.itemList.length > 0) {
            newVal.itemList.map((item, index) => {
              if (item.detailList.length > 0) {
                item.detailList.map((subItem, subIndex, subArray) => {
                  if (subIndex === 0) {
                    subItem['itemName'] = item.itemName;
                    subItem['itemDescription'] = item.itemDescription;
                    subItem['itemWeight'] = item.itemWeight;
                    subItem['subCount'] = subArray.length;
                  }
                  this.tableData.push(subItem);
                });
              } else {
                item['detailName'] = '';
                item['detailDescription'] = '';
                item['detailWeight'] = '';
                item['subCount'] = 1;
                delete item.detailList;
                this.tableData.push(item);
              }
            });
          } else {
            this.tableData = [];
          }
        }
      },
      deep: true,
      immediate: true
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.table-style-baseinfos {
  table-layout: fixed;
    word-break: break-all;
    background-color: rgba(210, 212, 214, 1);
    box-sizing: border-box;
    border-width: 0.5px;
    border-style: solid;
    border-color: rgba(210, 212, 214, 1);
    border-radius: 0px;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    width: 100%;
    font-weight: 401;
    font-style: normal;
    font-size: 14px;
    color: #8896a7;
    margin-bottom: 20px;
}
.table-style-baseinfo {
    table-layout: fixed;
    word-break: break-all;
    background-color: rgba(210, 212, 214, 1);
    box-sizing: border-box;
    border-width: 0.5px;
    border-style: solid;
    border-color: rgba(210, 212, 214, 1);
    border-radius: 0px;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    width: 100%;
    font-weight: 401;
    font-style: normal;
    font-size: 14px;
    color: #8896a7;
    margin-bottom: 20px;
}
.table-style-baseinfos td {
    width: 25%;
    background-color: rgba(255, 255, 255, 1);
    border: none;
    border-radius: 0px;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    font-weight: 401;
    font-style: normal;
    font-size: 14px;
    color: #2b3b4e;
    height: 32px;
    padding: 0 10px;
}
.table-style-baseinfo td {
    // width: 25%;
    background-color: rgba(255, 255, 255, 1);
    border: none;
    border-radius: 0px;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    font-weight: 401;
    font-style: normal;
    font-size: 14px;
    color: #2b3b4e;
    height: 32px;
    padding: 0 10px;
}
.table-style-baseinfos .text-right-background-color {
    background-color: #fdfeff4d;
    text-align: right;
}
.table-style-baseinfo .text-right-background-color {
    background-color: #fdfeff4d;
    text-align: right;
}
.text-center-background-color {
  background-color: #fdfeff4d;
  text-align: center;
}
.text-center-background {
  text-align: center;
}
.text-left-background-none {
    text-align: left;
}
</style>